// 路由的代码在这里
// 路由的作用：跳转页面，页面的文件和浏览器的url之间的对应关系

// 导入VueRouter的包
import { createRouter, createWebHistory } from 'vue-router'

// 导入组件
import HelloWorld from '../components/HelloWorld.vue'
import MyCom from '../components/MyCom.vue'
import Index from '../components/Index.vue'
import SongList from '../components/SongList.vue'
import Detail from '../components/Detail.vue'
import notFound from '../components/404.vue'
import AxiosDemo from '../components/AxiosDemo.vue'
import PlaySong from '../components/PlaySong.vue'

// 路由表 最核心的是：url和组件的对应关系
var routes = [
    // path 就是地址  component就是组件
    { path: '/helloworld', component: HelloWorld, meta: {title: 'helloworld'} },
    { path: '/mycom', component: MyCom, meta: {title: 'com'} },
    { path: '/index', component: Index, meta: {title: 'index'} },
    { path: '/songlist', component: SongList, meta: {title: 'song'} },
    { path: '/axiosdemo', component: AxiosDemo, meta: {title: 'axios'} },
    { path: '/play/:id', component: PlaySong, meta: {title: '正在播放'} },
    // :name表示字段名是name，而且加了冒号表示name是变量
    { path: '/detail/:name', component: Detail, meta: {title: 'detail'} },
    // 以下两行是重定向的方式，这种方式会修改浏览器的地址
    // { path: '/:pathMatch(.*)*', redirect: '/404'},
    // { path: '/404', component: notFound}
    // ============ 处理404页面的两种方式 ==============
    // 以下这一行是直接跳转的方式，不修改页面地址
    { path: '/:pathMatch(.*)*', component: notFound, meta: {title: '搞错了，再来！'}}
]
// 创建路由实例
var router = createRouter({
    // 路由模式
    history: createWebHistory(),
    // 冒号前的routes是固定选项 ，后面的routes是刚刚定义的数组
    routes: routes
})
// 暴露出去
export default router